import { size, IFormProps, pageSize, dateTimeFormat } from "../../utils/common";
import React from "react";
import { connect } from "dva";
import { Form, Row, Col, Button, Input, Table, Popconfirm, Select } from "antd";
// import moment from 'moment';
const Styles = require("../../styles/index.less");
import * as api from "../../api/api";
import PointRuleEdit from "../../components/malls/PointRuleEdit";

export interface IPointRulesPros extends IFormProps {
  mall: any;
}
class PointRules extends React.PureComponent<IPointRulesPros, any> {
  constructor(props) {
    super(props);
  }

  state = {
    visible: false
  };

  componentDidMount() {
    this.getPointRules();
  }

  search = () => {
    this.getPointRules();
  };

  getPointRules = (payload?) => {
    payload = Object.assign({}, this.props.form.getFieldsValue(), {
      ...payload
    });
    this.props.dispatch({
      type: "mall/getPointRules",
      payload
    });
  };

  reset = () => {
    this.props.form.resetFields();
  };

  edit = (pointRule = {}) => {
    this.setVisible(true);
    this.props.dispatch({
      type: "mall/save",
      payload: { pointRule }
    });
  };

  setVisible = (visible = false) => {
    this.setState({ visible });
  };

  save = form => {
    let { pointRule } = this.props.mall;
    form = Object.assign({}, pointRule, form);
    this.props.dispatch({
      type: "mall/savePointRule",
      payload: {
        form,
        callback: () => {
          this.setVisible();
          this.search();
        }
      }
    });
  };

  render(): JSX.Element {
    const { getFieldDecorator } = this.props.form;
    const { loading } = this.props;
    const {
      pointRule,
      pointRules: { items }
    } = this.props.mall;
    const { visible } = this.state;
    return (
      <Row className={Styles.F_BG_WHITE1}>
        <Row className={Styles.F_BG_WHITE}>
          <Col span={24}>
            <Form layout="inline">
              <Form.Item>
                <Button
                  size={size}
                  type="primary"
                  loading={loading}
                  onClick={this.search}
                >
                  查询
                </Button>
              </Form.Item>
            </Form>
            <Col span={24}>
              <hr className={Styles.hrBorder} />
              <h3>体验金奖励规则列表</h3>
            </Col>
            <Col span={24}>
              <Table
                dataSource={items}
                bordered
                pagination={false}
                rowKey={(record: api.SingleUserMallMallVOPointRulesVO) =>
                  String(record.id)
                }
                loading={loading}
              >
                <Table.Column
                  title="序号"
                  key="no"
                  render={(text, record, index) => {
                    return index + 1;
                  }}
                />
                <Table.Column
                  title="对应用户等级"
                  key="userRuleLevelView"
                  dataIndex="userRuleLevelView"
                />
                <Table.Column
                  title="分享可得体验金"
                  key="sharePoint"
                  dataIndex="sharePoint"
                />
                <Table.Column
                  title="VIP团队返利比例"
                  key="vipGroupRateView"
                  dataIndex="vipGroupRateView"
                />
                <Table.Column
                  title="直推会员返利比例"
                  key="directUserRateView"
                  dataIndex="directUserRateView"
                />
                <Table.Column
                  title="直推用户升级VIP可得体验金"
                  key="directUserToVIP"
                  dataIndex="directUserToVIP"
                />
                <Table.Column
                  title="直推用户升级合伙人可得体验金"
                  key="directUserToSuperVIP"
                  dataIndex="directUserToSuperVIP"
                />
                <Table.Column
                  title="操作"
                  render={(
                    text,
                    record: api.SingleUserMallMallVOPointRulesVO,
                    index
                  ) => {
                    return (
                      <div>
                        <a
                          className={Styles.M_RIGHT}
                          onClick={() => this.edit(record)}
                        >
                          编辑
                        </a>
                      </div>
                    );
                  }}
                />
              </Table>
            </Col>
          </Col>
        </Row>
        {visible ? (
          <PointRuleEdit
            visible={visible}
            pointRule={pointRule}
            onSave={this.save}
            onCancel={this.setVisible}
          />
        ) : (
          undefined
        )}
      </Row>
    );
  }
}

export default connect(({ mall, loading: { models: { mall: loading } } }) => ({
  mall,
  loading
}))(Form.create()(PointRules));
